<template>
    <div id="home" style="text-align: left">
        <news
            msg="HelloWorld"
            :users="users"
            @receiveInfo="handleChild"
            v-model="message"
            @receiveChange="receiveChange"></news>
        <span>{{message}}</span>
        <div id="example-1">
            <p>{{msg}}</p>
            <button @click="handleClick">变化</button>
        </div>
        <hr/>
        <div id="example-2">
            <slot-component>
                <template v-slot:header>
                    this is header
                </template>
                <template v-slot:main>
                    <p>This is a default v-slot</p>
                </template>
                <template v-slot:footer>
                    this is a footer
                </template>
            </slot-component>
        </div>
        <hr/>
        <div id="example-3">
            <blog-post>
                <template v-slot:header>
                    <h1>Header</h1>
                </template>
                <template v-slot="slotProps">
                    <b>{{slotProps.item.name}}</b>
                </template>
                <template v-slot:footer="slotProps">
                    <h2>{{slotProps.user.firstName}}:{{slotProps.user.lastName}}</h2>
                </template>
            </blog-post>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import News from '@/components/home/news/news.vue'
import BlogPost from '@/components/home/news/blogPost.vue'
interface User{
    id:number;
    name:string;
}
@Component({
    name:"Index",
    components:{
        BlogPost,
        News
    }
})
export default class Index extends Vue {
    name = 'Index';
    msg = "TypeScript and Vue";
    handleClick(){
        this.msg = "HelloWorld";
    }

    @Watch("msg")
    onMsgChanged(newVal:string,oldVal:string){
        console.log(newVal);
        console.log(oldVal);
    }

    users:Array<User> = [
        {
            id:1,
            name:"动漫"
        },
        {
            id:2,
            name:"游戏"
        }
    ]

    handleChild(item:User){
        console.log(item);
    }
    message = "HelloWorld";
    receiveChange(val:any){
        console.log(val);
    }
    user = {
        firstName:"John",
        lastName:"Connor"
    }
}
</script>

<style scoped>

</style>
